<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${productInfoDTO.productName} 立即购买-小米商城</title>
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/mi/css/common/header.css">
    <link rel="stylesheet" href="/mi/css/cart/add_cart.css">
    <link rel="stylesheet" href="/mi/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="/mi/css/common/page_bottom.css">
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />

</head>

<body>
    <div id="app">

        <!-- 定义头部 -->
        <%@include file="../common/header.jsp"%>
        <!-- 定义头部end -->
        <!-- start 手机概述参数导航栏 -->
        <div class="cart_nav">
            <div class="cart_nav_container">
                <h2 id="proName">${productInfoDTO.productName} </h2>
                <div class="left">
                    <span>|</span>
                    <a href="#">${productInfoDTO.productName}</a>
                </div>
                <div class="right">
                    <a href="/mi/product/overview?productId=${productInfoDTO.productId}">概述页</a>
                    <span>|</span>
                    <a href="javascript:go_parameter(${productInfoDTO.productId})">参数页</a>
                    <span>|</span>
                    <a href="#">F码通道</a>
                    <span>|</span>
                    <a href="#">咨询客服</a>
                    <span>|</span>
                    <a href="/mi/product/comment">用户评价</a>
                </div>
            </div>
        </div>
        <!-- end 手机概述,参数导航栏 -->
        <!--  start 详情 -商品介绍  -->
    </div>
    <div id="cart_detail">
        <div class="container">
            <div class="detail_left">
                <img src="${productInfoDTO.picImg}">
            </div>
            <div class="detail_right">
                <h2>${productInfoDTO.productName}</h2>
                <p class="cc">
                    <font color="#ff4a00">「购机最高享24期分期免息；+949元得Micare保障服务」</font>
                    ${productInfoDTO.introduce}
                </p>
                <p class="ziying"
                    title="企业名称：小米通讯技术有限公司
                企业执照注册号：91110108558521630L
                企业地址：北京市海淀区西二旗中路33号院6 号楼9层019号
                企业电话：400-100-5678
                营业期限：2010年08月25日 至 2040年08月24日
                经营范围：开发手机技术、计算机软件及信息技术；技术检测、技术咨询、技术服务、技术转让；计算机技术培训；系统集成；货物进出口、技术进出口、代理进出口；家用电器、通信设备、广播电视设备（不含卫星电视广播、地面接收装置）、机械设备、电子产品、文化用品的批发零售；维修仪器仪表；销售医疗器械I类、II、III类、针纺织品（含家纺家饰）、服装鞋帽、日用杂货、工艺品、文化用品、体育用品、照相器材、卫生用品（含个人护理用品）、钟表眼镜、箱包、家具（不从事实体店铺经营）、小饰品、日用品、乐器、自行车、智能卡；计算机、通讯设备、家用电器、电子产品、机械设备的技术开发、技术服务；销售金银饰品（不含金银质地纪念币）；家用空调的委托生产；委托生产翻译机；销售翻译机、五金交电（不含电动自行车）、厨房用品、陶瓷制品、玻璃制品、玩具、汽车零配件、食用农产品、花卉、苗木、宠物用品、建筑材料、装饰材料、化妆品、珠宝首饰、通讯设备、卫生间用品、农药；生产手机（仅限在海淀区永捷北路2号三层生产及外埠生产）；出版物批发；出版物零售；销售食品。（销售第三类医疗器械以及销售食品以及依法须经批准的项目，经相关部门批准后依批准的内容开展经营活动。）">
                    小米自营
                </p>
                <p class="price-info">
                    <span id="headPrice">${productInfoDTO.specificationList.get(0).price}&nbsp;元</span>
                </p>
                <div class="line"></div>
                <div class="zeng">
                    <span>赠完即止</span>
                    <span>Xiaomi MIX 4买赠价值69元单动圈耳机</span>
                </div>
                <div class="address-box">
                    <div class="product-address">
                        <i class="iconfont">&#xe606;</i>
                        <div class="address-con">
                            <div class="address-info">
                                <span>北京</span>
                                <span>北京市</span>
                                <span>海淀区</span>
                                <span>清河街道</span>
                                <a href="#" class="edit">修改</a>
                            </div>
                            
                        </div>
                        <div class="info">
                            <div class="desc">
                                <span>有现货</span>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- 选择版本 -->
                <div class="buy-option">
                    <div class="buy-child">
                        <div class="buy-box">
                            <div class="title" style="font-size: 18px;color: #333;margin-top: 20px;">选择版本</div>
                            <ul >
                                <c:forEach items="${productInfoDTO.specificationList}" var="ph">
                                    <li name="memeryLi" style="cursor: pointer" onclick="changePrice(this, ${ph.price})">
                                        <input type="hidden" value="${ph.spec}">
                                        <a>${ph.spec}</a>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                    <div class="buy-child">
                        <div class="buy-box">
                            <div class="title" style="font-size: 18px;color: #333;margin-top: 20px;">选择颜色</div>
                            <ul>
                                <c:forEach items="${productInfoDTO.colorNameList}" var="c">
                                    <li name="colorLi" style="cursor: pointer" onclick="changeColor(this,'${c.colorName}')"><a>${c.colorName}</a></li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- end 选择版本 -->
                <div class="selected-list">
                    <ul>
                        <li><span>${productInfoDTO.productName}</span> <span id="memery">${productInfoDTO.specificationList.get(0).spec}</span> <span  id="indexColor">${productInfoDTO.colorNameList.get(0).colorName}</span><span id="grayPrice" style="float: right">${productInfoDTO.specificationList.get(0).price}元</span></li>
                    </ul>
                    <div class="total-price" id="totalPrice">总计: ${productInfoDTO.specificationList.get(0).price}元</div>
                </div>
                <div class="btn-box">
                    <div class="sale-btn">
                        <a <c:if test="${user != null}"> href="javascript:goToCartSuccess(this)" </c:if> <c:if test="${user == null}"> href="/mi/login" </c:if> id="goToCartSuccess" class="btn-primary">加入购物车</a>
                    </div>
                    <div class="favorite-btn">
<%--                        onclick="bian()"--%>
                        <a class="btn-like" id="like" onclick="heart_true()"><i class="iconfont " id="heart" >&#xe619; </i>喜欢</a>
                    </div>
                </div>
                <div class="after-sale-info">
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>小米自营</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>小米发货</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>7天无理由退货</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>运费说明</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>企业信息</em></a>
                    </span>
                    <span>
                        <a href="#" class="support"><i class="iconfont">&#xeb32;</i> <em>价格保护</em></a>
                    </span>
                </div>
            </div>
        </div>
    </div>
    </div>
    <input type="hidden" id="productId" value="${productInfoDTO.productId}">
    <input type="hidden" id="productName" value="${productInfoDTO.productName}">
    <input type="hidden" id="productPig" value="${productInfoDTO.picImg}">

    <input type="hidden" id="productId" value="${productInfoDTO.productId}">

    <!-- 底部： 价格说明 -->
    <div class="prices-explanation">
        <div class="explanation-name">
            <h3>价格说明</h3>
        </div>
        <div class="explanation-content">
            <img src="/mi/imgs/price-explanation.jpeg">
        </div>
    </div>



    <script src="/mi/plugins/layui-v2.6.8/layui/layui.js"></script>
    <script src="/mi/plugins/jquery/jquery.min.js"></script>
    <script src="/mi/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>


    <%@include file="../common/page-bottom.jsp"%>

    <script>
        function goToCartSuccess(obj){
            let paraPrice = document.getElementById("grayPrice").innerText.substring(0, document.getElementById("grayPrice").innerText.length - 1);
            let proName = document.getElementById("proName");
            let productId = document.getElementById("productId");
            let para = proName.innerText + " ";
            // alert(str)
            let str = "";
            for(let i = 0; i < memeryLi.length; i++){
                if(memeryLi[i].getAttribute("index") == "true") {
                    para += memeryLi[i].innerText.trim();
                    str += memeryLi[i].innerText.trim();
                }
            }
            para += " ";
            if(para.indexOf("+") != -1){
                // alert(1111)
                para = para.replace('+', '%2B');
            }
            for(let i = 0; i < colorLi.length; i++){
                if(colorLi[i].getAttribute("index") == "true")
                    para += colorLi[i].innerText.trim();
            }

            if(str != "")
                window.location = "/mi/product/addTip?productId="+productId.value + "&para="+para + "&proName=" + proName.innerText + "&paraPrice=" + paraPrice;
            else
                layer.tips('请选择商品参数后在购买', '#goToCartSuccess');

        }
        function go_parameter(productId) {
            window.location='/mi/product/parameter?productId='+productId;
        }
    </script>
    <script type="text/javascript" src="/mi/js/cart/add_cart.js"></script>


</body>

</html>